<template>
  <component :is="menuName"></component>
</template>

<script setup lang="ts">
import { computed, markRaw } from 'vue'
import PcMenu from '@yang/components/MenuList/pc'
import IpadMenu from '@yang/components/MenuList/ipad'
import PhoneMenu from '@yang/components/MenuList/phone'
import { useWindowSize } from '@vueuse/core'

const { width } = useWindowSize()
const menuName = computed(() => {
  if (width.value >= 1200) {
    return markRaw(PcMenu)
  }
  if (width.value >= 900) {
    return markRaw(IpadMenu)
  }
  return markRaw(PhoneMenu)
})
</script>

<style lang="scss" scoped></style>
